<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/screen.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>NUS-ISS(LAMS)</title>
</head>
<body>
<div id="page-top-outer">    

<!-- Start: page-top -->
<div id="page-top">

	<!-- start logo -->
	<div id="logo">
		<h1 style="color: #fff; font-style: oblique;">NUS-ISS(LAMS)</h1>
	</div>
	<!-- end logo -->
	
	</div>
<!-- End: page-top -->

</div>
<!-- End: page-top-outer -->
	
<div class="clear">&nbsp;</div>
<!--  start nav-outer-repeat................................................................................................. START -->
<div class="nav-outer-repeat"> 
<!--  start nav-outer -->
<div class="nav-outer"> 

		<!-- start nav-right -->
		<div id="nav-right">	
		<div class="nav">
		<div class="table">
				<div class="nav-divider">&nbsp;</div>
		<label class="current" id="username"><i>${loggedEmployee.name}</i></label>
		<div class="nav-divider">&nbsp;</div>
		<a href="${pageContext.request.contextPath}/logout"><label class="current" id="logout">Logout</label></a>
				</div>
		<!-- end nav-right -->
</div></div>

		<!--  start nav -->
		<div class="nav">
		<div class="table">
		<ul class="select">
			<li><a href="${pageContext.request.contextPath}/employee/Leave-Form.html"><b>Leave Application</b></a></li>
			<li><a href="${pageContext.request.contextPath}/employee/Leavehistory-Appending.html"><b>View Leave History</b></a></li>
		</ul>
			
				<div class="clear"></div>
		
		</div>
		<div class="clear"></div>
		</div>
		<!--  start nav -->

</div>
<div class="clear"></div>
<!--  start nav-outer -->
</div>
<!--  start nav-outer-repeat................................................... END -->

 <div class="clear"></div>
 
<!-- start content-outer ........................................................................................................................START -->
<div id="content-outer">
<!-- start content -->
<div id="content">

	<!--  start page-heading -->
	<div id="page-heading">
		<h1>Leave Application Form</h1>
	</div>
	<!-- end page-heading -->

	<table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
	<tr>
		<th rowspan="3" class="sized"><img src="${pageContext.request.contextPath}/resources/images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
		<th class="topleft"></th>
		<td id="tbl-border-top">&nbsp;</td>
		<th class="topright"></th>
		<th rowspan="3" class="sized"><img src="${pageContext.request.contextPath}/resources/images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
	</tr>
	<tr>
		<td id="tbl-border-left"></td>
		<td>
		<!--  start content-table-inner ...................................................................... START -->
		<div id="content-table-inner">
		
			<!--  start table-content  -->
			<div id="table-content"> 
				<!--  start product-table ..................................................................................... -->
				<form:form id="mainform" commandName="Leave" action="employee/success" method="post" onSubmit="return isValid();">
						<table border="0" cellpadding="0" cellspacing="0"  id="id-form">
				<tr>
	        		<th valign="top">Employee ID</th>
	        		<td><form:input value="${loggedEmployee.employeeId}" path="employee.employeeId" class="inp-form"/>
	        		<%-- <input name="employee.employeeId" type="text" value="${loggedEmployee.employeeId}" disabled="disabled" id="leaveType" class="inp-form"  />  --%>
					</td>
	        		<td></td>
	        	</tr>
	        	<tr>
	        		<th valign="top">Employee Name</th>
	        		<td><input type="text" id="leaveType" disabled="disabled" value="${loggedEmployee.name}" class="inp-form"  /></td>
	           		<td></td>
	        	</tr>
	        	<tr>
	        		<th valign="top">Leave Type</th>
	        		<td>
	        		<select name="leaveType.leaveCode">
							<option value="001">Annual Leave</option>
							<option value="002">Medical Leave</option>
							<option value="003">Compensation Leave</option>
					</select>
	        		<td></td>
	        	</tr>
	        	
	        	<tr>
	        		<th valign="top">Start Date</th>
	        		<td><input name="fromDate" type ="date" id="startDate" class="inp-form" required/>
					</td>
	        		<td></td>
	        	</tr>
	        	<tr>
	        		<th valign="top">End Date</th>
	        		<td><input name="toDate"  class="inp-form"   type="date" id="endDate" required>
					</td>
	        		<td></td>
	        	</tr>
	        	<tr>
	        		<th valign="top">Comment</td>
	        		<td>
					 	<input name="employeeComment" type="form-textarea" id="name" class="inp-form"></input>
					</td>
	        		<td></td>
	        	</tr>
	        	
	        	<tr>
	        		<td colspan="3">
	        			<button id="update" type="submit" class="form-submit" name="save">Update</button>
	        			
	        		</td>
	        	</tr>
	        </table>
				<!--  end product-table................................... --> 
				</form:form>

			</div>
			<!--  end content-table  -->
				
			
			<div class="clear"></div>
		 
		</div>
		<!--  end content-table-inner ............................................END  -->
		</td>
		<td id="tbl-border-right"></td>
	</tr>
	<tr>
		<th class="sized bottomleft"></th>
		<td id="tbl-border-bottom">&nbsp;</td>
		<th class="sized bottomright"></th>
	</tr>
	</table>
	<div class="clear">&nbsp;</div>

</div>
<!--  end content -->
<div class="clear">&nbsp;</div>	
</div>
<!--  end content-outer........................................................END -->
<div class="clear">&nbsp;</div>
    
<!-- start footer -->         
<div id="footer">
	<!--  start footer-left -->
	<div id="footer-left">
	
	ISS SA-37 TEAM 2 @  GILBRT @ KHIN LAI PHYO AUNG @ LIU CHANG @ MAHEEN @ NAN MAI NGIN @ NARESH SARAVANA </div>
	<!--  end footer-left -->
	<div class="clear">&nbsp;</div>
</div>

<script>

	function differece( date1, date2 ) {
	  //Get 1 day in milliseconds
	  var one_day=1000*60*60*24;

	  // Convert both dates to milliseconds
	  var date1_ms = date1.getTime();
	  var date2_ms = date2.getTime();

	  // Calculate the difference in milliseconds
	  var difference_ms = date2_ms - date1_ms;
	    
	  // Convert back to days and return
	  return Math.round(difference_ms/one_day); 
	}
	
	function isValid()
	{
		var startDate = document.getElementById("startDate").value;
		var endDate = document.getElementById("endDate").value;
		
		startDate = new Date(startDate);
		endDate = new Date(endDate);
		var l_days = differece(startDate, endDate);
		
		if (l_days > 17) {
			alert("Your are not allow more than 18 days!!!!!!!");
			return false;
		}
		else if (endDate < startDate) 
		{
			alert("Invalid Start Date And End Date!!");
			return false;
		}
		return true;
	}
</script>
</body>
</html>